<template>
  <div id="page-finance-money">
    <h2>账户金额</h2>

    <card>
      <p>
        <span>账户余额：{{accountMoney}}元</span>
        <span class="ml20">可提现金额：{{accountMoney - freezeMoney}}元</span>
        <Button type="primary" class="ml20" @click="btnWithDraw">
          提现
        </Button>
      </p>
    </card>


    <card class="mt20">
      <Tabs size="small" :animated="false" v-model="selectTab">
        <TabPane label="支付明细" name="pay">
          <pay-list v-if="selectTab === 'pay'"></pay-list>
        </TabPane>
        <TabPane label="提现明细" name="withdraw">
          <withdraw-list v-if="selectTab === 'withdraw'"></withdraw-list>
        </TabPane>
      </Tabs>
    </card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import financeApi from '@/api/finance'
  import payList from './components/money/pay-list'
  import withdrawList from './components/money/withdraw-list'

  export default {
    name: 'finance-money',
    components: {
      payList,
      withdrawList
    },
    data () {
      return {
        selectTab: 'pay',
        query: {
          userType: '1'
        },
        accountMoney: null,
        freezeMoney: null
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      btnWithDraw () {
        if (this.accountMoney - this.freezeMoney === 0) {
          this.$Modal.info({
            title: '提示',
            content: '对不起，您的账户金额不足，不能提现',
            onOk: () => {}
          })
        } else {
          this.$router.push({path: '/finance/withdraw'})
        }
      },
      async getRclubAccount () {
        const { body } = await financeApi.getAccount()
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.accountMoney = body.responseData.accountMoney
          this.freezeMoney = body.responseData.freezeMoney
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.getRclubAccount()
    }
  }
</script>
